<template>
	<div class="list">
		<header>
			<div class="returns">
				<i class="iconfont icon-fanhui"></i>
			</div>
			<div class="search">
				<i class="iconfont icon-fangdajing1"></i>
				<form action="" onsubmit="return false">
					<input type="search" placeholder="搜索你喜欢的...">
				</form>
			</div>
			<div class="go-home">
				<i class="iconfont icon-shouye"></i>
			</div>
		</header>
		<section>
			<div class="list-l" ref="left">
				<ul class="l-item">
					<li 
					v-for="(item,index) in leftData"
					:key="index"
					:class='{active:index==currentIndex}'
					@click="goScroll(index)"
					>{{item.name}}</li>
					
				</ul>
			</div>
			<div class="list-r" ref="right">
				<div>
					<ul 
						v-for="(item,index) in rightData"
						:key="index">
						<li class="shop-list"
						v-for="(k,i) in item"
						:key="i"
					>
							<h2>— {{k.name}} —</h2>
							<ul class="r-content">
								<li 
								v-for="(j,idx) in k.list"
								:key="idx"
								>
									<img :src="j.imgUrl" alt="" />
									<span>{{j.name}}</span>
								</li>
							</ul>
						</li>
					</ul>
				</div>
				
			</div>
		</section>
		<Tabbar></Tabbar>
	</div>
</template>

<script>
	import  Tabbar  from "@/components/common/Tabbar.vue"
	import http from "@/common/api/request.js";
	import BetterScroll from 'better-scroll';
	export default{
		name:"List",
		data(){
			return{
				//左侧数据
				leftData:[],
				//右侧数据
				rightData:[],
				rightBScroll:'',//右侧滑动
				allHeight:[],//承载右侧所有元素的高度
				scrollY:'',//右侧滚动距离
			}
		},
		computed:{
			currentIndex(){
				return this.allHeight.findIndex((item,index)=>{
					return this.scrollY >= item && this.scrollY <this.allHeight[index+1]
				})
				
			}
		},
		methods:{
			goScroll(index){
				this.rightBScroll.scrollTo(0,-this.allHeight[index],300);
				// console.log(index);
			}
		},
		components: {
			Tabbar,
			
		},
		async created(){
			let res = await	http.$axios({
				url:'api/goods/list',
			})
			let leftArr = [];
			let rightArr= [];
			res.forEach((v)=>{
				leftArr.push({
					id:v.id,
					name:v.name,
				})
				rightArr.push(v.data);
			})
			this.leftData = leftArr;
			this.rightData = rightArr;
			// console.log(rightData);

			this.$nextTick(()=>{
				//左侧滑动
				 new BetterScroll(this.$refs.left,{
					click:true,
				 });
				 //右侧滑动
				 this.rightBScroll = new BetterScroll(this.$refs.right,{
					click:true,
					probeType:3,
				 });
				 //统计右侧所有板块高度值，放入数组中，方便后边计算
				let height = 0;
				this.allHeight.push(height);
				//获取右侧每一块
				let uls = this.$refs.right.getElementsByClassName('shop-list');
				//把dom对象转换成真正的数组
				Array.from(uls).forEach(v=>{
					height += v.clientHeight;
					this.allHeight.push(height);
					
				})
				//右侧滚动的值
				this.rightBScroll.on('scroll',(pos)=>{
					//只需要Y
					this.scrollY = Math.abs(pos.y)
					// console.log(pos);
				})
      		})
		},
		
		
	};
</script>
<style scoped >
.list{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: fixed;
}

header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 2.75rem;
    background-color: green;
    color: #fff;

}
.returns{
    padding: 0 0.625rem;
}

.returns i{
    font-size: 1.75rem;
}
.search{
    width: 16.25rem;
    height: 1.875rem;
    display: flex;
    align-items: center;
    background-color: #fff;
    color: #666;
    border-radius: 0.75rem;
}
.search form{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.search form input{
    width: 100%;
}
.search i{
    padding: 0 0.625rem;
    color: black;
}
.go-home i{
	padding: 0 0.625rem;
	color: #fff;
	font-size: 1.5rem;
	margin-right: 0.625rem;
}

section{
	display: flex;
	flex:1;
	overflow: hidden;
}

.list-l{
	width: 5.8125rem;
	background-color: #fff;
	overflow: hidden;
	border-right: 0.0625rem solid #ccc;
}
.list-l .l-item{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.list-l .l-item li{
	width: 100%;
	padding: 0.1875rem 0;
	margin: 1.25rem 0;
	text-align: center;
	font-size: 1.125rem;
	
}
.active{
	color: green;
	border-left: 0.625rem solid green;
} 
.list-r{
	width: 100%;
	height: 100%;
	overflow: hidden;
	
}

.list-r .shop-list{
	text-align: center;
	
}
.shop-list h2{
	font-size: 1.25rem;
	font-weight: 400;
}
.r-content{
	display: flex;
	flex-wrap: wrap;
	/* justify-content: center; */
	align-items: center;
	padding: 0.625rem 0.625rem;
	
}
.r-content li{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 5.625rem;
	height: 5.625rem;
}
.r-content span{
	font-size: 1rem;
}
.r-content img{
	width: 3.75rem;
	height: 3.75rem;
	border-radius: 50%;
}
</style>

